<template>
  <div>
    <el-form
      :model="formdata"
      label-width="120px"
    >
      <el-form-item label="公司名称">
        <el-input v-model="formdata.name" />
      </el-form-item>
      <el-form-item label="公司地址">
        <el-input v-model="formdata.address" />
      </el-form-item>
      <el-form-item label="邮政编码">
        <el-input v-model="formdata.postcode" />
      </el-form-item>

      <el-form-item label="联系人">
        <el-input v-model="formdata.contact" />
      </el-form-item>

      <el-form-item label="手机号码">
        <el-input
          v-model="formdata.mobile"
          type="textarea"
        />
      </el-form-item>
      <el-form-item label="电话号码">
        <el-input v-model="formdata.phone" />
      </el-form-item>
      <el-form-item label="传真号码">
        <el-input v-model="formdata.fax" />
      </el-form-item>

      <el-form-item label="电子邮箱">
        <el-input v-model="formdata.email" />
      </el-form-item>

      <el-form-item label="QQ号码">
        <el-input
          v-model="formdata.qq"
          type="textarea"
        />
      </el-form-item>

      <el-form-item label="微信图标">
        <el-upload
          class="avatar-uploader"
          :action="`${path}/fileUploadAndDownload/upload`"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
          :headers="header"
          list-type="picture-card"
          :on-preview="handlePictureCardPreview"
          :on-remove="handleRemove"
        >
          <img
            v-if="imageUrl"
            :src="imageUrl"
            class="avatar"
          >
          <el-icon
            v-else
            class="avatar-uploader-icon"
          ><Plus /></el-icon>
        </el-upload>
      </el-form-item>

      <el-form-item label="营业执照">
        <el-input v-model="formdata.blicense" />
      </el-form-item>

      <el-form-item label="其它信息">
        <el-input
          v-model="formdata.other"
          type="textarea"
        />
      </el-form-item>

      <el-form-item>
        <el-button
          type="primary"
          @click="onSubmit"
        >提交</el-button>
        <!-- <el-button>取消</el-button> -->
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
import { useUserStore } from '@/pinia/modules/user'
import { onMounted, ref } from 'vue'
import { divingcompany, divingUpdateCompany } from '@/api/companys/diving'
import { ElMessage } from 'element-plus'
const formdata = ref([])
const imageUrl = ref([])
const path = ref(import.meta.env.VITE_BASE_API)

const handleAvatarSuccess = (
  response,
  uploadFile
) => {
  console.log('token', uploadFile, response)
  imageUrl.value = response.data.file.url
  formdata.value.weixin = imageUrl.value
}

const header = ref({
  'x-token': ''
})

const beforeAvatarUpload = (rawFile) => {
  if (rawFile.type !== 'image/jpeg' && rawFile.type !== 'image/png') {
    ElMessage.error('图片必须是PNG或JPG格式')
    return false
  } else if (rawFile.size / 1024 / 1024 > 2) {
    ElMessage.error('图片大小不能大于 2MB!')
    return false
  }
  return true
}



const getdata = async() => {
  const res = await divingcompany()
  formdata.value = res.data
  imageUrl.value = res.data.weixin
  
}

onMounted(() => {
  getdata()
  const { token } = useUserStore()
  header.value['x-token'] = token
})
const onSubmit = async() => {
  console.log(formdata.value)
  const res = await divingUpdateCompany(formdata.value)
  
  if (res.code === 0) {
    ElMessage({
      message: '提交成功',
      type: 'success',
    })
  }
}

</script>

<style lang="scss">

</style>
